<template>
    <div class="temperature-view" :style="{height:height}">
        <div class="title">
            <el-radio-group v-model="openModelTitle">
                    <el-radio-button label="1">有效积温</el-radio-button>
                    <el-radio-button label="2">降雨量</el-radio-button>
                </el-radio-group>
              <div>
                <label>时间范围</label>
                <el-date-picker
                v-model="selectYear"
                @change="get_dataList"
                style="width:220px;margin-left:10px;"
                class="plan-daterange"
                value-format="YYYY-MM-DD 00:00:00"
                type="daterange"
                :clearable="false"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                ></el-date-picker>
                <template v-if="openModelTitle==1">
                <label><vxe-icon name="calendar" style="margin-left:50px;" status="success"></vxe-icon>生物学零度</label>
                <el-select v-model="selectTemp" 
                    @change="get_dataList"
                    style="width:100px;margin-left:5px;"  
                    placeholder="请选择">
                    <el-option
                    v-for="item in filterTempOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </div>
            </div>
            <div class="yf-view" >
                        <div class="box-card" v-if="openModelTitle==1">
                                <div class="item">
                                    <img src="https://ftp.cqtancheng.com/files/farming-skin/icon-humidity.png" /> 
                                    <span class="name">有效积温{{ dataObject.accTemp }}℃</span>
                                    <div class="centerMax">
                                        <div v-if="dataObject.accTemp>dataObject.accTempLastyear && dataObject.accTemp>0">
                                            比去年同期高 {{dataObject.accTemp - dataObject.accTempLastyear }}℃
                                            <span class="up">↑</span> 
                                        </div>
                                        <div v-else>比去年同期低
                                            {{dataObject.accTempLastyear>0?dataObject.accTempLastyear-dataObject.accTemp:-dataObject.accTemp }}℃
                                            <span class="dn">↓</span>
                                             </div>
                                    </div>
                                </div>

                        </div>
                        <div class="box-card" v-else>
                            <div class="item">
                                    <img src="https://ftp.cqtancheng.com/files/farming-skin/icon-rainfall.png" /> 
                                    <span class="name">平均日降雨量{{dataObject?.accRainfall }}mm</span>
                                    <div class="centerMax">   
                                        <div v-if="dataObject.accRainfall>dataObject.accRainfallLastyear && dataObject.accRainfall>0">
                                            比去年同期高 {{(dataObject.accRainfall - dataObject.accRainfallLastyear).toFixed(2) }}mm
                                            <span class="up">↑</span>
                                        </div>
                                        <div v-else>比去年同期低{{ dataObject.accRainfallLastyear>0?(dataObject.accRainfallLastyear-dataObject.accRainfall).toFixed(2):(-dataObject.precip)}}mm
                                            <span class="dn">↓</span>
                                     </div>
                                    </div>
                                </div>
                        </div>
            </div> 
            <template v-if="openModelTitle==1">
            <div style="position: relative;height:300px;padding:0;margin-top: 40px">
                <tempChart 
                v-if="rainList.length>0"
                title="所选时间范围与历史同期有效积温趋势变化图"
                :list="rainList" 
                :xList="[{title:'有效积温',key:'accTemp'},
                {title:'去年历史同期',key:'accTempLastyear'},
                {title:'多年历史同期',key:'manyYearTempAvg'}]"
                />
            </div>
            <div style="position: relative;height:300px;padding:0;margin: 40px 0 0 0" >
                <tempChart 
                v-if="rainList.length>0"
                title="所选时间范围日最高温、最低温趋势变化图"
                :list="rainList" 
                :xList="[{title:'日最高温',key:'tempMax'},{title:'日最低温',key:'tempMin'}]"
                />
            </div>
         </template>
            <div style="position: relative;height:300px;padding:0;margin: 40px 0 0 0" v-if="openModelTitle==2">

                <tempChart 
                title="所选时间范围与历史同期降雨量趋势变化图"
                v-if="rainList.length>0"
                :list="rainList" 
                :xList="[{title:'降雨量',key:'accRainfall'},
                {title:'去年历史同期',key:'accRainfallLastyear'},
                {title:'多年历史同期',key:'manyYearRainfallAvg'}]"
                />
            </div>
            <vxe-table
                show-overflow
                auto-resize
                :border="true"
                size="small"
                style="width:98%;margin-top:40px"
                max-height="300"
                :scroll-y="{enabled: true}"
                :data="getSortList(tableList)">
                <vxe-column type="seq" align="center" title="序号" width="60"></vxe-column>
                <vxe-column :field="item.dataIndex" align="center" :title="item.title" v-for="item in getListData">
                    <template #default="{ row }" v-if="item.dataIndex=='manyYearTempAvg'">
                        <span style="padding-right:5px">{{row.manyYearTempAvg}}</span>
                            <span class="up" v-if="row.accTemp > row.manyYearTempAvg">↑</span>
                            <span class="md" v-if="row.accTemp == row.manyYearTempAvg">-</span>
                            <span class="dn" v-if="row.accTemp < row.manyYearTempAvg">↓</span>
                    </template>
                    <template #default="{ row }" v-if="item.dataIndex=='manyYearRainfallAvg'">
                        <span style="padding-right:5px">{{row.manyYearRainfallAvg}}</span>
                            <span class="up" v-if="row.accRainfall > row.manyYearRainfallAvg">↑</span>
                            <span class="md" v-if="row.accRainfall == row.manyYearRainfallAvg">-</span>
                            <span class="dn" v-if="row.accRainfall < row.manyYearRainfallAvg">↓</span>
                    </template>
                    
                </vxe-column>
            </vxe-table>
    </div>
</template>

<script setup>
import {ref,onMounted, computed} from "vue"
import {getHistoryTemp} from '@/api/plant'
import {formatDate} from '@/utils/format.js'
import {useUserStore} from '@/pinia/modules/user'
import tempChart from './tempChart.vue'
const userStore = useUserStore()
const props = defineProps({
    detail:{
        type:Object,
        default:{}
    },
    height:{
        type:String,
        default:'78vh'
    }
})
const emit = defineEmits(['set'])
const dataObject = ref({})
const rainList= ref([])
const tableList= ref([])
const selectTemp = ref(10)
const openModelTitle = ref(1)
const getNum=(value)=>{
    if(value>10){
        return value
    }else{
        return `0${value}`
    }
}
const selectYear = ref([`${new Date().getFullYear()}-01-01`,
`${new Date().getFullYear()}-${getNum(new Date().getMonth()+1)}-${getNum(new Date().getDay())}`])
const dataList = ref([])
const getListData =computed(()=>{
    
  if(openModelTitle.value==2){
    return [
        {
            title: '日期',
            dataIndex: 'createTime',
        },
        {
            title: '降雨量(mm)',
            dataIndex: 'accRainfall',
        },
        {
            title: '去年历史同期(mm)',
            dataIndex: 'accRainfallLastyear',
            align: "center"
        },
        {
            title: '多年历史同期平均(mm)',
            dataIndex: 'manyYearRainfallAvg',
            align: "center"
        }
    ]
  }else{
    return [
        {
            title: '日期',
            dataIndex: 'createTime',
        },
        {
            title: '日平均温度(°C)',
            dataIndex: 'tempAv',
        },
        {
            title: '有效积温(°C)',
            dataIndex: 'accTemp',
        },
        {
            title: '去年历史同期(°C)',
            dataIndex: 'accTempLastyear',
            align: "center" 
        },
        {
            title: '多年历史同期(°C)',
            dataIndex: 'manyYearTempAvg',
            align: "center"
        },
    ]
  }
})

const filterTempOptions = ref([])
const getTempFilters=()=> {
  const maxTemp = 30
  const minTemp = -11
  let tempList = []
  for (let i = maxTemp; i > minTemp; i--) {
    tempList.push({
      label: String(i) + '℃',
      value: i
    })
  }
  filterTempOptions.value = tempList
}
onMounted(()=>{
    getTempFilters()
    get_dataList()
})

const arrSortByKey=(array)=>{
    return array.sort((a, b)=> {
      return new Date(b.createTime) - new Date(a.createTime);
    });

}

const get_dataList = ()=>{
    getHistoryTemp({
        farmLandId:props.detail?.farmLandId,  
        shengwuxue:selectTemp.value,
        district:props.detail?.district?.replace('区','').replace('县','')||userStore.userInfo.farmList.find((item)=>item.farmId==userStore.userInfo.farmId)?.district.replace('区','').replace('县',''),
        weatherDayStart:selectYear.value[0]||'',
        weatherDayEnd:selectYear.value[1]||''
    }).then((res)=>{
        if(res.success){
            dataList.value = res.data ||{}
            const rains = res.data.map((item,index) => {
                return {
                    Id:index, 
                    createTime: formatDate(item.weatherDay),
                    accRainfall: Number(item.precip||0).toFixed(2), 
                    accRainfallLastyear: Number(item.precip_lastyear||0).toFixed(2),
                    manyYearRainfallAvg: Number(item.manyYearRainfallAvg||0).toFixed(2),
                    accTemp: Number(item.accTemp||0).toFixed(2),
                    tempMax: Number(item.tempMax||0).toFixed(2),
                    tempMin: Number(item.tempMin||0).toFixed(2), 
                    accTempLastyear: Number(item.accTempLastyear||0).toFixed(2),
                    manyYearTempAvg: Number(item.manyYearTempAvg||0).toFixed(2),
                    tempAv: Number(item.temp||0).toFixed(2)
                }
            }) 
            const rains1 = res.data.map((item,index) => {
                return {
                    Id:index, 
                    createTime: formatDate(item.weatherDay),
                    accRainfall: Number(item.precip||0).toFixed(2), 
                    accRainfallLastyear: Number(item.precip_lastyear||0).toFixed(2),
                    manyYearRainfallAvg: Number(item.manyYearRainfallAvg||0).toFixed(2),
                    accTemp: Number(item.accTemp||0).toFixed(2),
                    tempMax: Number(item.tempMax||0).toFixed(2),
                    tempMin: Number(item.tempMin||0).toFixed(2), 
                    accTempLastyear: Number(item.accTempLastyear||0).toFixed(2),
                    manyYearTempAvg: Number(item.manyYearTempAvg||0).toFixed(2),
                    tempAv: Number(item.temp||0).toFixed(2)
                }
            }) 
            rainList.value =rains
            tableList.value =rains1
             dataObject.value = rainList.value[0] ||{}
        }
    })
}

const getSortList =(list)=>{
   return  arrSortByKey(list)
}
</script>

<style lang="scss" scoped>
.temperature-view{
    height: 78vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.title{
    display: flex;
    background: #00AF7016;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #333;
    height: 40px;
    padding:0 10px;
    margin-bottom:10px;
}
.yf-view{
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
  align-items: center;
  .box-card{
    padding: 0 30px;
    background: rgba(254, 249, 236, 0.85);
    border: 1px solid rgba(245, 200, 173, 0.42);
    position: relative;
    cursor: pointer;
    border-radius: 30px;
    .item{
        display: flex;
        align-items: center;
        padding:5px 0;
        img{
            height:30px;
        }
        .name{
            font-size:17px;
            color: #333;
            font-weight: bold;
            margin-left:10px;
            border-right:1px solid #eee;
        }
        .centerMax{
            padding-left: 20px;
            font-size:13px;
            color: #888;
           .value{
                font-weight: bold;
                font-size: 22px;
                color: #333;
           }
        }
    }
    .btn-right{
        position: absolute;
        right:20px;
        z-index:9;
        top:35px;
    }
  }
}
.up{color: #a00;font-size:15px;font-weight: bold}
.md{color: #ccc;font-size:15px;font-weight: bold}
.dn{color: #0c0;font-size:15px;font-weight: bold}
</style>